<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>实时大数据综合展示平台</title>
    <link rel="stylesheet" href="static/css/base.css"/>
    <link rel="stylesheet" href="static/css/swiper.min.css"/>
    <link rel="stylesheet" href="static/css/index.css"/>
    <link rel="stylesheet" href="static/css/style.css"/>

</head>
<body>
<div class="kp_all">
    <div class="kp_header">
        <div class="header_logo">
            <div class="logo_bg_left"></div>
            <div class="logo_bg_right"></div>
            <div class="logo"></div>
            <div class="logo_txt"></div>
            <div class="logo_title">实时大数据综合展示平台</div>
        </div>
    </div>
    <div class="kp_rank">
        <div class="rank_title clearfix">
            <img src="static/images/msg_icon.png" alt=""/>
            <span>借阅排行榜</span>
        </div>
        <div class="rank_banner">
            <div class="poster-main B_Demo">
                <div class="poster-btn poster-prev-btn"></div>
                <ul class="poster-list">
                    <li class="poster-item"><a href="#"><img src="static/upload/1.png" width="100%"></a></li>
                    <li class="poster-item"><a href="#"><img src="static/upload/2.jpg" width="100%" ></a></li>
                    <li class="poster-item"><a href="#"><img src="static/upload/3.png" width="100%" ></a></li>
                    <li class="poster-item"><a href="#"><img src="static/upload/4.png" width="100%" ></a></li>
                    <li class="poster-item"><a href="#"><img src="static/upload/5.png" width="100%" ></a></li>
                    <li class="poster-item"><a href="#"><img src="static/upload/6.jpg" width="100%" ></a></li>
                    <li class="poster-item"><a href="#"><img src="static/upload/7.jpg" width="100%" ></a></li>
                    <li class="poster-item"><a href="#"><img src="static/upload/8.png" width="100%" ></a></li>
                    <li class="poster-item"><a href="#"><img src="static/upload/9.jpg" width="100%" ></a></li>
                    <!--<li class="poster-item"><a href="#"><img src="static/upload/13.jpg" width="100%" ></a></li>-->


                </ul>
                <div class="poster-btn poster-next-btn"></div>
            </div>
        </div>
        <div class="rank_des">
            <div class="bookdes_left">
                <ul>
                    <li class="clearfix">
                        <span class="num" style="background-color:rgba(248,47,123,0.6)">1</span>
                        <p>百年孤独</p>
                    </li>
                    <li class="clearfix">
                        <span class="num" style="background-color:rgba(251,216,25,0.6)">2</span>
                        <p>时间简史:插图本</p>
                    </li>
                    <li class="clearfix">
                        <span class="num" style="background-color:rgba(151,208,65,0.6);">3</span>
                        <p style="overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space: nowrap;">丰乳肥臀</p>
                    </li>
                    <li class="clearfix">
                        <span class="num">4</span>
                        <p>许三观卖血记.第3版</p>
                    </li>
                    <li class="clearfix">
                        <span class="num">5</span>
                        <p>活着.第3版</p>
                    </li>
                </ul>
            </div>
            <div class="bookdes_right">
                <ul>
                    <li class="clearfix">
                        <span class="num">6</span>
                        <p>蛙</p>
                    </li>
                    <li class="clearfix">
                        <span class="num">7</span>
                        <p>看见</p>
                    </li>
                    <li class="clearfix">
                        <span class="num">8</span>
                        <p>边城</p>
                    </li>
                    <li class="clearfix">
                        <span class="num">9</span>
                        <p>机械设计手册.第4卷</p>
                    </li>
                    <li class="clearfix">
                        <span class="num">10</span>
                        <p>谁动了我的奶酪？</p>
                    </li>
                </ul>

            </div>

        </div>
    </div>
    <div class="kp_borrow">
        <div class="rank_title clearfix">
            <img src="static/images/msg_icon.png" alt=""/>
            <span>借还书系统</span>
        </div>
        <div class="borrow_num">
            <ul class="clearfix">
                <li style="width: 150px">
                    <p>今日借阅</p>
                    <div>
                        <span class="borrow_book_num" id="myTargetElement">419</span>
                        <span>册</span>
                    </div>
                </li>
                <li style="width: 150px">
                    <p>本周借阅</p>
                    <div>
                        <span class="borrow_book_num" id="myTargetElement2">4120</span>
                        <span>册</span>
                    </div>

                </li>
                <li style="width: 300px;margin-right: 0">
                    <p>累计借阅</p>
                    <div>
                        <span class="borrow_book_num" id="myTargetElement3">215262</span>
                        <span>册</span>
                    </div>

                </li>

            </ul>
            <div class="borrow_line">
                <img src="static/images/line_title.png" alt=""/>
                <div class="" id="main3" style="margin:auto;width: 800px;height:240px;"></div>
            </div>

        </div>

    </div>
    <div class="kp_style">
        <div class="rank_title clearfix">
            <img src="static/images/msg_icon.png" alt=""/>
            <span>本馆风采</span>
        </div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="static/upload/111.jpg" alt="" title=""/></div>
                <div class="swiper-slide"><img src="static/upload/333.jpg" alt="" title=""/></div>
                <div class="swiper-slide"><img src="static/upload/666.jpg" alt="" title=""/></div>
                <div class="swiper-slide"><img src="static/upload/444.png" alt="" title=""/></div>

            </div>
        </div>
    </div>
    <div class="kp_count">
        <div class="rank_title clearfix">
            <img src="static/images/msg_icon.png" alt=""/>
            <span>到馆统计</span>
        </div>
        <div class="rank_num">
            <ul class="clearfix">
                <li>
                    <div id="indicatorContainer"></div>
                    <div class="msg_bg">今日到馆</div>
                    <span>人次</span>
                </li>
                <li>
                    <div id="indicatorContainer1"></div>
                    <div class="msg_bg">当前在馆</div>
                    <span>人次</span>

                </li>
                <li>
                    <div id="indicatorContainer2"></div>
                    <div class="msg_bg">本周到馆</div>
                    <span>人次</span>

                </li>

            </ul>
        </div>
        <div class="totalPer">
            <p>累计到馆（从2017年1月开始）</p>
            <div class="box">
                <div class="rectangle_bg">
                    <div class="rectangle">
                        <span id="myTargetElementt">1776714</span>
                        <span>人次</span>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="kp_back_first" onclick="processQuit();">
        <span>返回首页</span>
        <!--返回</br>首页-->
    </div>
</div>

<script src="static/js/lib/jquery-3.2.1.min.js"></script>
<script src="static/js/lib/swiper.min.js"></script>
<script src="static/js/lib/echarts.min.js"></script>
<!--//旋转木马轮播图js 需要3个配合使用-->
<script src="static/js/lib/jquery.js"></script>
<script src="static/js/lib/jquery.jDiaporama.js"></script>
<script src="static/js/view/PicCarousel.js"></script>
<!--生成圆环指示器js-->
<script src="static/js/lib/radialIndicator.js"></script>
<!--数字从0动态增长js-->
<!--<script src="static/js/lib/count.js"></script>-->
<script src="static/js/lib/countUp.min.js"></script>
<!--和旋转木马相关的-->
<!--<script src="static/js/view/script.js"></script>-->
<!--自己的工具箱函数-->
<script src="static/js/view/CXJSBridge.js"></script>
<script src="static/js/view/tool.js"></script>
<script src="static/js/view/index.js"></script>
<script>
    $(function () {
        $(".B_Demo").PicCarousel({
            "width":540,		//幻灯片的宽度
            "height":220,		//幻灯片的高度
            "posterWidth":140,	//幻灯片第一帧的宽度
            "posterHeight":220, //幻灯片第一张的高度
            "scale":0.8,		//记录显示比例关系
            "speed":2000,		//记录幻灯片滚动速度
            "autoPlay":true,	//是否开启自动播放
            "delay":1500,		//自动播放间隔
            "verticalAlign":"center"	//图片对齐位置

        });
        var swiper = new Swiper('.swiper-container', {
            pagination: '.swiper-pagination',
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
            slidesPerView: 1,
            paginationClickable: true,
            spaceBetween: 30,
            loop: true,
            autoplay: 2500,
        });
        ///点击返回按钮123
        function processQuit()
        {
            jsBridge.postNotification('CLIENT_EXIT_WEBAPP',{message:''});
        }





    });
</script>

</body>
</html>